browser-sync

由於我們現在瀏覽網頁 是 file的路徑

這樣不太好

所以我們可以使用 browser-sync 解決此問題
https://browsersync.io/docs/gulp

npm install browser-sync

載入

var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./public"
        }
    });
});

// default 也要補上
gulp.task('default',['jade','sass','babel','vendorJS','browser-sync','watch']);

輸入 gulp 就成功啦~~

但 browser-sync 還有一個功能
(自動重新整理)

可於 jade , sass , babel 加上

  .pipe(browserSync.stream())

加上結果

// jade
gulp.task('jade', function() {
    gulp.src('./source/**/*.jade')
    .pipe($.plumber())
    .pipe($.jade({
        pretty: true
    }))
    .pipe(gulp.dest('./public/'))
    .pipe(browserSync.stream())
});

// sass
gulp.task('sass', function () {
    return gulp.src('./source/scss/**/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass().on('error', $.sass.logError))
    .pipe($.postcss([autoprefixer()]))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./public/css'))
    .pipe(browserSync.stream())
});

// babel
gulp.task('babel', () =>
    gulp.src('./source/js/**/*.js')
        .pipe($.sourcemaps.init())
        .pipe($.babel({
            presets: ['@babel/env']
        }))
        .pipe($.concat('all.js'))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('./public/js'))
        .pipe(browserSync.stream())
);

可嘗試修改 all.scss
會發現網頁會自動重新整理

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷